<!--增加用户名校验功能-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <script type="text/javascript">
        window.onload = function () {
            //正则表达式,5-12个字符,数字字母下划线均可
            var acquire = /^\w{5,12}$/;
            var usernameObj = document.getElementById("username");
            var verifyObj = document.getElementById("verify");
            //只要点击输入框的其他位置,就会触发校验
            usernameObj.onblur = function () {
                if (acquire.test(usernameObj.value)) {
                    verifyObj.innerHTML = "√";
                } else {
                    verifyObj.innerHTML = "×";
                }
            }
        }

    </script>
</head>
<body>

<table align="center">
    <input type="hidden" value="login" name="action"/>
    <h2 align="center">注册表单</h2>
    <!--    action 为服务器地址 method可选get和post两种方式，post较安全且不规定上传值长度-->
    <form action="http://localhost:8080" method="get">
        <!--        form所有内容均需要带有value和name,否则上传也不知道上传的是什么-->
        <tr>
            <td>用户名称：</td>
            <td>
                <input type="text" value="默认值" name="username" id="username"/>
                <span id="verify"></span><!--显示校验结果-->
            </td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" value="0" name="password"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" value="0" name="password"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" value="man" name="sex" checked="checked"/>男
                <input type="radio" value="woman" name="sex"/>女
            </td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>
                <input type="checkbox" value="java" name="hobby" checked="checked"/>Java
                <input type="checkbox" value="js" name="hobby"/>JavaScript
                <input type="checkbox" value="cpp" name="hobby"/>C++
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select name="country">
                    <option>----请选择国籍----</option>
                    <option selected="selected">中国</option>
                    <option>美国</option>
                    <option>日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="5" cols="20" name="desc">默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" value="reset"/></td>
            <td align="right"><input type="submit" value="submit"/></td>
        </tr>

    </form>
</table>
</body>
</html>